<template>
    <div ref="chartRef" style="width: 100%; height: 400px;"></div>
    <div style="width: 100%; height: 400px;">
        <a-tree
            :data="treeData"
            height="1000px"
            size="mini"
            style="display: block"
            width="200px"
            :default-expanded-keys="['0-0-0']"
            :default-selected-keys="['0-0-0', '0-0-1']"
        />
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';

const chartRef = ref(null);
const treeData = [
    {
        title: 'Trunk 0-0',
        key: '0-0',
        children: [
            {
                title: 'Branch 0-0-0',
                key: '0-0-0',
                disabled: true,
                children: [
                    {
                        title: 'Leaf',
                        key: '0-0-0-0',
                    },
                    {
                        title: 'Leaf',
                        key: '0-0-0-1',
                    }
                ]
            },
            {
                title: 'Branch 0-0-1',
                key: '0-0-1',
                children: [
                    {
                        title: 'Leaf',
                        key: '0-0-1-0',
                    },
                ]
            },
        ],
    },
];
const option = {
    title: {
        text: '数据指标分布',
        subtext: '单位：万元',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left'
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [
                { value: 313, name: '业务类', percent: 34 },
                { value: 522, name: '操作类', percent: 34 },
                { value: 522, name: '其他', percent: 34 }
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

onMounted(() => {
    const chartInstance = echarts.init(chartRef.value);
    chartInstance.setOption(option);
});
</script>

<style scoped>
.chart-container {
    width: 100%;
    height: 400px;
}
</style>